/**
* @Author: zmx
* @Date: 2023/9/25
* @Description:
*/
<template>
  <div style="padding: 20px">
    <el-form :inline="true" :model="formInline">
      <el-form-item>
        <el-button type="primary" @click="addRiskItem">+ 新增算法指标</el-button>
      </el-form-item>
      <el-form-item label="算法指标名称">
        <el-input v-model="formInline.itemName" placeholder="算法指标名称"></el-input>
      </el-form-item>
      <el-form-item label="对象类型">
        <el-select
          v-model="formInline.itemType"
          value-key="id"
          filterable
          clearable
        >
          <el-option
            v-for="item in optionsList"
            :key="item.id"
            :label="item.itemObjectName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-select
          v-model="formInline.isReady"
          value-key="id"
          filterable
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#006175',color:'#fff'}">
      <el-table-column label="序号" width="50">
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="itemName" label="算法指标名称" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="itemType" label="对象类型" v-if="optionsList">
        <template v-slot="scope">
          {{ getObjectType(scope.row.itemType) }}
        </template>
      </el-table-column>
      <el-table-column prop="itemDesc" label="描述" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="isReady" label="是否启用">
        <template v-slot="scope">
          <span v-if="scope.row.isReady === '1'">是</span>
          <span v-else style="color: red">否</span>
        </template>
      </el-table-column>
      <el-table-column prop="itemTypeSymbol" label="符号"></el-table-column>
      <el-table-column prop="isUsing" label="使用状态">
        <template v-slot="scope">
          <span v-if="scope.row.isUsing === '1'" style="color: green">使用中</span>
          <span v-else>未使用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template v-slot="scope">
          <el-button class="common-btn" @click="editItem(scope.row)">编辑</el-button>
          <el-button class="delete-btn" @click="stopItem(scope.row)" v-if="scope.row.isReady === '1'" :disabled="scope.row.isUsing === '1'">禁用</el-button>
          <el-button class="common-btn" @click="startItem(scope.row)" v-else>启用</el-button>
          <el-button class="common-btn" @click="detailItem(scope.row)">详情</el-button>
          <el-button class="common-btn" @click="itemThreshold(scope.row)">维护</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      :page-size="formInline.pageSize"
      layout="total, sizes, pager, next, jumper"
      @current-change="refreshPageByCondition"
      @size-change="handleSizeChange"
      :current-page.sync="formInline.pageNumber"
      :total="total">
    </el-pagination>
    <riskItemDialog v-if="ItemDialogShow"
      :ItemDialogShow="ItemDialogShow"
      :itemParam="itemParam"
      @closeDialog="closeDialog"
      @selectData="selectData"></riskItemDialog>
    <itemThresholdDialog v-if="T7dDialogShow"
      :T7dDialogShow="T7dDialogShow"
      :itemId="itemId"
      @closeDialog="closeT7dDialog"
      @selectData="selectT7dData"></itemThresholdDialog>
    <confirmStopDialog v-if="ConfirmDialogShow"
       :ConfirmDialogShow="ConfirmDialogShow"
       @closeDialog="closeConfirmDialog"
       @selectData="confirmDialogSubmit"></confirmStopDialog>
  </div>
</template>

<script>
import {addRiskItem, getRiskItemQuery, startRiskItem, stopRiskItem, updateRiskItem, updateRiskItemT7d} from '../../api/risk/riskItem'
import riskItemDialog from "./riskItemDialog";
import itemThresholdDialog from "./itemThresholdDialog";
import confirmStopDialog from "./confirmStopDialog";
import {getItemDictObject} from "../../api/risk/commonDict";
export default {
  components:{
    riskItemDialog,
    itemThresholdDialog,
    confirmStopDialog
  },
  data() {
    return {
      option:[],
      tableData: [],
      formInline: {
        itemName: '',
        itemType: '',
        isReady:'',
        pageSize: 10,
        pageNumber: 1
      },
      itemParam: {},
      itemId: '',
      total: 0,
      actionParam: {
        itemId: '',
        itemType: '',
        action: ''
      },
      ItemDialogShow: false,
      T7dDialogShow: false,
      ConfirmDialogShow: false,
      optionsList:[],
      options:[
        {
          name:'是',
          value:'1'
        },
        {
          name:'否',
          value:'0'
        },
      ]
    };
  },
  mounted() {
    this.getInit()
  },
  methods: {
    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.getInit()
    },
    addRiskItem(){
      this.itemParam.type = 'add'
      this.itemParam.itemName = ''
      this.itemParam.itemType = ''
      this.itemParam.itemTypeSymbol = ''
      this.itemParam.itemDesc = ''
      this.itemParam.maintainAdvice = ''
      this.itemParam.crawlTable = ''
      this.itemParam.crawlColumn = ''
      this.ItemDialogShow = true
    },
    reset() {
      this.formInline.itemType = ''
      this.formInline.itemName = ''
      this.formInline.isReady = ''
      this.refreshPageByCondition()
    },
    editItem(item){
      this.itemParam.type = 'edit'
      this.showDialogWithParam(item)
    },
    detailItem(item){
      this.itemParam.type = 'detail'
      this.showDialogWithParam(item)
    },
    showDialogWithParam(item) {
      this.itemParam.itemId = item.id
      this.itemParam.itemName = item.itemName
      this.itemParam.itemType = item.itemType
      this.itemParam.itemTypeSymbol = item.itemTypeSymbol
      this.itemParam.itemDesc = item.itemDesc
      this.itemParam.maintainAdvice = item.maintainAdvice
      this.itemParam.crawlTable = item.crawlTable
      this.itemParam.crawlColumn = item.crawlColumn
      this.ItemDialogShow = true
    },
    startItem(item){
      this.actionParam.itemId = item.id
      this.actionParam.itemType = item.itemType
      this.actionParam.action = 'start'
      startRiskItem(this.actionParam).then((res)=>{
        if(res && res.code === 200){
          this.$message({ message: '启用成功', type: 'success' })
          this.refreshPageByCondition()
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    },
    stopItem(item){
      this.ConfirmDialogShow = true
      this.actionParam.itemId = item.id
      this.actionParam.itemType = item.itemType
      this.actionParam.action = 'stop'
    },
    itemThreshold(item) {
      this.itemId = item.id
      this.T7dDialogShow = true
    },
    closeDialog() {
      this.ItemDialogShow = false
    },
    closeT7dDialog() {
      this.T7dDialogShow = false
    },
    closeConfirmDialog() {
      this.ConfirmDialogShow = false
    },
    selectData(val) {
      //监听“弹窗组件”返回的数据
      let params = {
        itemName: val.itemName,
        itemType: val.itemType,
        itemTypeSymbol: val.itemTypeSymbol,
        maintainAdvice: val.maintainAdvice,
        crawlTable: val.crawlTable,
        crawlColumn: val.crawlColumn,
        itemDesc: val.itemDesc
      }
      if (val.type === 'add') {
        addRiskItem(params).then((res)=>{
          if(res && res.code === 200){
            this.$message({ message: '新增成功', type: 'success' })
            this.refreshPageByCondition()
          }
        }).catch(err => {
          this.$message({ message: '服务器异常：' + err, type: 'warning' })
        })
      } else if (val.type === 'edit') {
        params.itemId = val.itemId
        updateRiskItem(params).then((res)=>{
          if(res && res.code === 200){
            this.$message({ message: '更新成功', type: 'success' })
            this.refreshPageByCondition()
          }
        }).catch(err => {
          this.$message({ message: '服务器异常：' + err, type: 'warning' })
        })
      }
    },
    selectT7dData(val) {
      let params = {
        itemId: this.itemId,
        itemList: val
      }
      updateRiskItemT7d(params).then((res)=>{
        if(res && res.code === 200){
          this.$message({ message: '维护阈值成功', type: 'success' })
          this.refreshPageByCondition()
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    },
    confirmDialogSubmit(val) {
      //监听“弹窗组件”返回的数据
      this.actionParam.actionDesc = val
      stopRiskItem(this.actionParam).then((res)=>{
        if(res && res.code === 200){
          this.$message({ message: '禁用成功', type: 'success' })
          this.refreshPageByCondition()
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    },
    getInit(){
      getItemDictObject().then((res)=>{
        if(res){
          this.optionsList = res
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
      this.refreshPageByInit()
    },
    getObjectType(type) {
      if (this.optionsList && this.optionsList.length > 0) {
        return this.optionsList.find(item => item.id === type).itemObjectName
      }
      return ''
    },
    search() {
      this.refreshPageByCondition()
    },
    refreshPageByInit() {
      this.refreshPage({page: this.formInline.pageNumber - 1,
        size: this.formInline.pageSize})
    },
    refreshPageByCondition() {
      let params = {
        itemType: this.formInline.itemType,
        itemName: this.formInline.itemName,
        isReady: this.formInline.isReady,
        source: 'web',
        page: this.formInline.pageNumber - 1,
        size: this.formInline.pageSize
      }
      this.refreshPage(params)
    },
    refreshPage(params) {
      getRiskItemQuery(params).then((res)=>{
        if(res){
          this.tableData = res.itemList
          this.total = res.itemListSize
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    }
  }
}
</script>

<style scoped>

</style>
